import React,{useState} from 'react'
import { Form,Button,Input ,message ,notification} from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './login.css'
import JSEncrypt from 'jsencrypt';
import withRoute from '../../components/sandbox/withRoute.js'
import { connect } from 'react-redux';

function OtherLoginForm(props) {
    const [error,setError] = useState({});
    const socket = new WebSocket("wss://my-manage.cn/websocket");
    // 监听WebSocket消息
    var encryptor = new JSEncrypt();
    socket.addEventListener('message', (event) => {
        const pubKey = event.data;
        encryptor.setPublicKey(pubKey)
    });
    const onFinish = (value) => {
        let newValue = {
            'username':encryptor.encrypt(value.username),
            'password':encryptor.encrypt(value.password)
        }
        props.loginActions(newValue).then( 
          (r)=>{
              props.history.push('/home')
          },
          (s)=>{
              setError({error:''})
              notification.info({
                message: `通知`,
                description:
                  `用户名或密码错误`,
                placement:'top',
                duration:'1'
              });
          }
        )
        props.getUserList && props.getUserList();
        props.getCategories();
        props.getrolelist && props.getrolelist();
        props.getrightlist()
    }
    return (
        <div style={{background:'rgb(35,39,65)',height:'100%',overflow:'hidden'}}>
            <div className='formContainer'>
                <div className='logintitle'>新闻管理系统</div>
                {error && <div className='logintitle'>{error.error}</div>}
                <Form name="normal_login" className="login-form" onFinish={onFinish}>
                    <Form.Item name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
                        <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password"  placeholder="Password"/>
                    </Form.Item>
                    <Form.Item>
                        <div>
                            <span style={{float:'left'}}>
                                <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                            </span>
                            <span style={{color:'white'}}>-账号: admin 密码: 1 临时登陆为测试JWT-</span>
                            <span style={{float:'right'}}>
                            <Button onClick={()=>{props.history.push(`/login`)}} >
                                返回登录
                            </Button>
                                <Button onClick={() => props.history.push(`/news`)}>游客访问</Button> 
                            </span>
                        </div>
                        <span style={{color:'white'}}>此页面登陆JWT失效时间60秒</span>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

const mapStateToProps = ({RoleListReducer:{rolelist}})=>{
    return{
        rolelist
    }
}
export default connect(mapStateToProps,null)(withRoute(OtherLoginForm))

